<template>
  <div class="infinite-container">
    <div class="text-warning f12 text-center">实际以医院的排队叫号为准，如已预约则根据预约时段进入队列</div>
    <empty v-if="isEmpty"></empty>
    <div id="scrollC">
      <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
      <ul class="wlist">
        <li v-for="item in queue" :key="item.serialNumber">
          <div class="listTop flex flex_between">
            <p>
              <i class="iconfont t1  icon-keshi v-middle"/>
              <span>{{item.departmentName}}</span>
            </p>
            <p>
              <span>需等待人数：</span>
              <span>{{item.frontNumber}}</span>
            </p>
          </div>
          <div class="listMiddle flex flex_between">
            <div class="mRight">
              <p class="f12 t3">我的号码</p>
              <p class="t5 number">{{item.serialNumber}}</p>
            </div>
            <div class="mLeft">
              <p class="f12 t3">当前叫号</p>
              <p class="t1 number">{{item.currentNumber || 0}}</p>
            </div>
            
          </div>
          <div class="listBottom flex flex_between f12 t3">
            <p>
              <span>就诊人：</span>
              <span>{{item.patientName}}（{{item.patientMedicalCardNumber}}）</span>
            </p>
            <p class="flex">
              更新于：
              <span>{{item.queuesUpdateTime.slice(11)}}</span>
            </p>
            
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {commonAjax, RESTFUL_API} from '@/api/api'
  import empty from '@/components/empty'
  export default {
    components: {
      empty
    },
    data () {
      return {
        queue: [],
        refreshing: false,
        trigger: null,
        familyPerson: JSON.parse(sessionStorage.getItem('familyPerson')),
        isEmpty: false
      }
    },
    mounted () {
      this.trigger = this.$el
      this.getQueue()
    },
    methods: {
      refresh () {
        this.refreshing = true
        this.getQueue()
      },
      getQueue () {
        let param = {
          // patientIdentityCardNumber: this.familyPerson.idcard,
          // patientMedicalCardType: 1,
          // patientIdentityCardType: this.familyPerson.cardtype,
          [this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]
        }
        this.$store.commit('UPDATE_LOADING')
        commonAjax(RESTFUL_API.mzQueue, param, true).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 1) {
            this.refreshing = false
            if (res.data.data.length > 0) {
              this.queue = res.data.data
              document.getElementById('scrollC').style.height = res.data.data.length * 180 + 'px'
            } else {
              this.isEmpty = true
              // this.$store.commit('UPDATE_TOAST', {message: '暂无候诊排队'})
            }
          } else {
            this.refreshing = false
            this.$store.commit('UPDATE_TOAST', {message: res.data.message})
          }
        }).catch(res => {
          this.refreshing = false
          this.$store.commit('UPDATE_TOAST', {message: '服务忙'})
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  #scrollC{
    width: 100%;
    height: 180px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    user-select: none;
  }
  .top{
    background-color: #F8E8DB;
    text-align: center;
    color:#DDA474;
    padding:5px 0;
  }
  .wlist{
    li{
      background-color: white;
      margin-bottom:10px;
    }
    .listTop,.listBottom{
      padding:10px 20px;
    }
    .listMiddle{
      margin: 0 20px;
      background: #F2F2F2;
      padding:10px 0;
      .number {
        font-size: 2em;
      }
      .mLeft,.mRight{
        width:40%;
        text-align: center;
      }
      .middleLine{
        width:20%;
        p{
          width:1px;
          border-left:1px solid @color-border;
          margin:0 auto;
          height:100%;
        }
      }
    }
  }
  .colorNormal{
    color:@color-normal;
  }
  .numGreen{
    font-size:18px;
    color:@color-primary;
  }
  .numGray{
    font-size:18px;
    color:@color-normal;
  }
</style>
